<template>
	<el-dialog v-model="show" :title="title" width="1350px" :before-close="handleClose">
		<div class="grid-container">
			<div class="grid-item flex">
				<div class="title">名称</div>
				<div>{{list.title}}</div>
			</div>
			<div class="grid-item flex">
				<div class="title">物料编码</div>
				<div>{{list.no}}</div>
			</div>
			<div class="grid-item flex">
				<div class="title">分类</div>
				<div category_id v-for="item in list.cate_name">
					<span v-if="item.id==list.category_id">{{item.name}}</span>
				</div>
			</div>
			<div class="grid-item flex">
				<div class="title">规格</div>
				<div>{{list.spec}}</div>
			</div>
			<div class="grid-item flex">
				<div class="title">型号</div>
				<div>{{list.model}}</div>
			</div>
			<div class="grid-item flex">
				<div class="title">属性一</div>
				<div>{{list.alias}}</div>
			</div>
			<div class="grid-item flex">
				<div class="title">属性二</div>
				<div>{{list.other}}</div>
			</div>
			<div class="grid-item flex">
				<div class="title">从属设备</div>
				<el-button @click="onHovertitles(list)" v-if="list.slave_name" size="small">
					{{list.slave_name}}
				</el-button>
			</div>
			<div class="grid-item flex">
				<div class="title">生产厂家</div>
				<div>{{list.manufacturer}}</div>
			</div>
			<div class="grid-item flex">
				<div class="title">出厂日期</div>
				<div>{{list.date_production}}</div>
			</div>
			<div class="grid-item flex">
				<div class="title">特种设备注册代码编号</div>
				<div>{{list.registration_code}}</div>
			</div>
			<div class="grid-item flex">
				<div class="title">登记牌证号</div>
				<div>{{list.registration_no}}</div>
			</div>
			<div class="grid-item flex">
				<div class="title">特种设备制造许可证</div>
				<div>{{list.license_key}}</div>
			</div>
			<div class="grid-item flex">
				<div class="title">检验起始日期</div>
				<div>{{list.inspection_start_date}}</div>
			</div>

			<div class="grid-item flex">
				<div class="title">检验周期</div>
				<div>{{list.inspection_cycle_name}}</div>
			</div>
			<div class="grid-item flex">
				<div class="title">登记牌证时间</div>
				<div>{{list.registration_date}}</div>
			</div>
			<div class="grid-item flex">
				<div class="title">产品合格证编号</div>
				<div>{{list.product_no}}</div>
			</div>
			<div class="grid-item flex">
				<div class="title">准用年限</div>
				<div>{{list.service_life}}</div>
			</div>
			<div class="grid-item flex">
			</div>
			<div class="grid-item flex">
			</div>
		</div>
		<div class="grid-containers">
			<!-- 图 -->
			<div class="grid-item flex">
				<div class="title">照片</div>
				<material-picker :photoHide="true" disabled v-model="list.certificate_image" :limit="99" />
			</div>
			<div class="grid-item flex">
				<div class="title">附件</div>
				<material-picker :photoHide="true" :img="false" disabled v-model="list.product_image" :limit="99" />
			</div>
			<div class="grid-item flex">
				<div class="title">备注</div>
				<div>{{list.remark}}</div>
			</div>
		</div>
	</el-dialog>
	<tableHover v-if="Hovertitles" ref="HovertitleRefs" :showImage="true" @success="getLists" @close="Hovertitles = false" />
</template>

<script setup lang="ts">
	import tableHover from '@/components/table-hovers/index.vue'
	const emit = defineEmits(['handleClose'])
	const props = defineProps([
		'show',
		'title',
		'list',
		'type'
	])
	const getLists = () => { }
	const Hovertitles = ref(false)
	const HovertitleRefs = shallowRef<InstanceType<typeof tableHover>>()
	const onHovertitles = async (data : any) => {
		Hovertitles.value = true
		await nextTick()
		HovertitleRefs.value?.open('edit')
		HovertitleRefs.value?.setFormData(data)
	}
	const handleClose = () => {
		emit('handleClose')
	}
</script>

<style>
	.grid-container {
		display: grid;
		/* grid-gap: 30px 50px */
		grid-column-gap: 0px;
		grid-row-gap: 0px;
		/* 一行放两列、两个auto */
		grid-template-columns: auto auto auto auto;
		border-left: 1px solid #e5e5e5;
		border-top: 1px solid #e5e5e5;
	}

	.grid-containers {
		display: grid;
		/* grid-gap: 30px 50px */
		grid-column-gap: 0px;
		grid-row-gap: 0px;
		/* 一行放两列、两个auto */
		grid-template-columns: auto;
		border-left: 1px solid #e5e5e5;
		/* border-top: 1px solid #e5e5e5; */
	}

	.grid-item {
		background-color: #fff;
		border-bottom: 1px solid #e5e5e5;
		border-right: 1px solid #e5e5e5;
		padding: 5px;
	}

	.title {
		width: 150px;
		text-align: right;
		padding-right: 20px;
	}
</style>